<template>
  <div id="homeBackLog" class="grid-content" style="padding: 0px 10px">
    <div class="right-top">
      <calendar @num="num" :backLogList="BacklogList"></calendar>
    </div>
    <div class="addtext" id="list">
      <div class="header">
        <span style="font-weight: 500">待办列表</span>
        <span style="color: rgb(64, 165, 234); cursor: pointer" @click="onmatters"> <i class="el-icon-plus"></i>添加事项</span>
      </div>
      <div class="db-list">
        <ul>
          <li v-if="istodoList">
            <div class="row" style="padding: 0px">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="params.content" maxlength="50"> </el-input>
            </div>
            <div class="set-box">
              <i class="el-icon-check" style="font-size: 20px; cursor: pointer" @click="onGetAddBacklog"></i>
              <i class="el-icon-close" style="font-size: 20px; cursor: pointer" @click="istodoList = false"></i>
            </div>
          </li>
          <template v-if="BacklogList && BacklogList.length > 0 && BacklogList.find((m) => m.date == queryDate)">
            <li v-for="item in BacklogList.find((m) => m.date == queryDate)?.dataList" :key="item.id">
              <div class="row" :style="item.status == 0 ? 'background:#FFF2E2;' : item.status == 2 ? 'background:#ffebea;' : 'background:#eef4f0;'">
                <p>{{ item.content }}</p>
              </div>
              <div class="set-box">
                <i title="完成待办事项" v-if="item.status != 1" class="el-icon-check" style="font-size: 20px; cursor: pointer" @click="onUpdateBacklog(item)"></i>
                <i title="删除待办事项" class="el-icon-close" style="font-size: 20px; cursor: pointer" @click="onDeleteBacklog(item)"></i>
              </div>
            </li>
          </template>
          <el-empty description="当前无待办" v-else></el-empty>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import calendar from "../components/calendar.vue";
import { currentMonthDays } from "@/util/util";
export default {
  components: {
    calendar,
  },
  data() {
    return {
      queryDate: currentMonthDays(),
      BacklogList: [],
      params: {
        backlogTime: currentMonthDays(),
        status: 0,
        isDelete: false,
        content: "",
      },
      istodoList: false,
    };
  },
  created() {
    this.nowDate = currentMonthDays();
  },
  mounted() {
    this.onGetBacklogList();
  },
  methods: {
    num(val) {
      this.queryDate = val;
      this.onGetBacklogList();
    },
    onmatters() {
      this.istodoList = true;
      this.params.content = "";
    },

    //获取代办事项列表
    onGetBacklogList() {
      this.loading = this.$loading({
        target: document.getElementById("list"),
        text: "加载中...",
        customClass: "loading",
      });
      this.$api.publicApi
        .GetBacklogList({ queryDate: this.queryDate })
        .then((res) => {
          if (res.data.status == 200) {
            this.BacklogList = res.data.data;
          }
          this.loading.close();
        })
        .catch(() => {
          this.loading.close();
        });
    },
    // 更新代办事项
    onUpdateBacklog(row) {
      this.$api.publicApi.UpdateBacklog(row.id).then((res) => {
        if (res.data.status == 200) {
          this.$message({
            message: "待办事项已完成",
            type: "success",
          });
          this.onGetBacklogList();
        }
      });
    },
    //删除代办事项
    onDeleteBacklog(row) {
      this.$api.publicApi.DeleteBacklog({ backlogId: row.id }).then((res) => {
        if (res.data.status == 200) {
          this.$message({
            message: "待办事项已取消",
            type: "success",
          });
          this.onGetBacklogList();
        }
      });
    },
    // 添加代办事项
    onGetAddBacklog() {
      if (!this.params.content) {
        this.$message.warning("请输入内容");
        return;
      }
      if (this.params.content.length > 50) {
        this.$message.warning("内容不可超过50个字符");
        return;
      }

      let params = {
        backlogTime: this.queryDate,
        content: this.params.content,
      };
      this.$api.publicApi.GetAddBacklog([{ ...params }]).then((res) => {
        let { status } = res.data;
        if (status == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.istodoList = false;
          this.onGetBacklogList();
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
#homeBackLog {
  :deep(.loading) {
    .el-loading-spinner {
      p {
        text-align: center;
      }
    }
  }
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  .addtext {
    height: calc(100% - 350px);
    .header {
      height: 40px;
      line-height: 40px;
      border-top: 1px solid #edeef2;
      font-size: 14px;
      position: relative;
      padding-left: 15px;
      display: flex;
      justify-content: space-between;
    }
    .db-list {
      width: 100%;
      height: 100%;
      padding: 10px;
      overflow-y: auto;
      ul {
        li {
          margin-bottom: 8px;
          display: flex;
          .row {
            width: 85%;
            padding: 10px;
            border-radius: 4px;
            font-size: 13px;
          }
          .set-box {
            display: flex;
            flex-flow: row;
            justify-content: center;
            align-items: center;
            width: 15%;
            text-align: center;
            line-height: 1;
            i {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
